<template>
    <div class="marquee-wrap">
        <marquee v-if="list.length > 4" width="100%" height="30" onmouseover="this.stop()" onmouseout="this.start()" scrolldelay="150" class="attendNews" :style="{'width':'92%'}">
            <a v-for="item in list.data.slice(0,10)" :key="item.id" class="text-overflow" @click="openNotice(item)">{{item.title}}</a>
        </marquee>
        <el-button class="more_marquee" @click="showMore" type="text" style="color: blue;">全部公告</el-button>
        <div v-if="list.length < 5" :style="{'width':'92%'}">
            <a v-for="item in list" :key="item.id" class="text-overflow" @click="openNotice(item)">{{item.title}}</a>
        </div>
        <el-dialog :close-on-click-modal="false" v-if="contentModal" :title="noticeObj.title" :visible.sync="contentModal">
            <div v-loading="loading">
                <div align="right" class="notice_title">
                    公告类型: <el-tag type="success" size="small" v-if="noticeObj.type == 1">系统公告</el-tag>
                    <el-tag type="info" size="small" v-else>普通公告</el-tag>

                    时间: {{noticeObj.startTime}}
                </div>
            </div>
            <div class="marquee-content" v-html="noticeObj.remarks"></div>
        </el-dialog>
        <RightPanel :showBtn="false" :showNotice.sync="showNotice">
            <el-scrollbar ref="scrollbar" wrap-class="scrollbar-wrapper">
                <el-button type="text" icon="el-icon-close" class="close_btn" title="关闭" @click="showNotice = false;"></el-button>
                <div class="bottom"  v-loading="noticeLoading">
                    <div style="display:inline-block;width:330px;"  v-for="item in contentAll" :key="item.id">
                        <el-tag type="success" size="small" v-if="item.type == 1">系统公告</el-tag>
                        <el-tag type="info" size="small" v-else>普通公告</el-tag>
                        <a :title="item.title" @click="openNotice(item)" class="current text-overflow">{{ item.title }}</a>
                    </div>
                </div>
                <div class="block" v-if="query.total > query.pageSize">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        layout="total, prev,pager, next, jumper"
                        :total="query.total">
                    </el-pagination>
                </div>
            </el-scrollbar>

        </RightPanel>
    </div>
</template>

<script>
import {select,selectOne} from '@/api/notice'
import RightPanel from '@/components/RightPanel'
export default {
    name:'MarqueeWrap',
    components: {
        RightPanel
    },
    data(){
        return {
            contentArr:[
            ],
            contentAll:[],
            noticeObj:{
                remarks:'',
                title: '',
                showTime:'',
                type:1
            },
            query: {
                pageNum: 1,
                pageSize: 15,
                total: 0,
            },
            contentModal:false,
            showNotice:false,//默认不打开更多窗口
            loading:false,
            noticeLoading:false,
            list:[],
        }
    },
    mounted(){
        this.init();
        this.addEventClickNotice()
    },
    methods:{
        init(){
            let _this = this;
            select({},this.query).then((data)=>{
                if (data.success) {
                    _this.list=data.data;
                    _this.checkHasTopShow();
                }else {
                    _this.$message.error("获取公告发生错误");
                }
            })
        },
        checkHasTopShow(){
            this.contentArr = this.list;
            for (let index in this.contentArr) {
                var contentArrElement = this.contentArr[index];
                if (contentArrElement.topshow){
                    contentArrElement.title = contentArrElement.title;
                    this.openNotice(contentArrElement);
                    return;
                }
            }
        },
        openNotice(notice){
            let _this = this;
            _this.loading = true;
            _this.noticeObj = {
                remarks:'',
                title: '',
                showTime:'',
                type:1
            };
            selectOne({"id":notice.id},this.query).then((data) => {
                if (data.success){
                    _this.noticeObj = data.data;
                }else {
                    _this.$message.error(data.msg)
                }
                _this.loading = false;
            })
            this.contentModal=true;
        },

        addEventClickNotice() {
            window.addEventListener('resize', ()=>{
                this.$refs.scrollbar.update()
            });
        },
        showMore(){
            this.showNotice = true;
            this.noticeLoading = true;
            select({},this.query).then((data)=>{
                if (data.success) {
                    this.contentAll = data.data;
                    this.query.total = data.total;
                }else {
                    this.$message.error("获取公告发生错误");
                }
                this.noticeLoading = false;
            })
        },
        handleCurrentChange(pageNum){
            this.query.pageNum = pageNum;
            select({},this.query).then((data)=>{
                if (data.success) {
                    this.contentAll = data.data;
                    this.query.pageNum = pageNum;
                    this.query.total = data.total;
                }else {
                    this.$message.error("获取公告发生错误");
                }
                this.noticeLoading = false;
            })
        },
    }
}
</script>

<style lang="scss" scoped>
    .el-scrollbar {
        height: 100%;
    }
    .marquee-wrap{
      background: #5fb98f;
        display: inline-block;
        margin-left: 100px;
        width: 50%;
        height: 30px;
        line-height: 30px;
        position: relative;
        a{
            color:red;
            margin-left: 50px;
            max-width:200px;
        }
    }
    .marquee-content{
        word-break: break-all;
        padding-top: 15px;
    }
    .notice_title{
        color: #9a9696;
        margin-top: -20px;
        margin-bottom: 10px;
        .el-tag{
            margin-right: 10px;
        }
    }
    .more_marquee{
        position: absolute;
        right: 20px;
        top: -5px;
    }
    .current{
        line-height: 30px;
        color: #409eff;
        max-width: 70%;
        float: left;
    }
    .close_btn{
        font-size: 20px;
        cursor: pointer;
        position: absolute;
        right:10px;
        top:-15px;
    }
    .bottom{
        padding-top:20px;
        /*height: 520px;*/
        .el-tag{
            float: left;
            margin-right: 20px;
        }
    }
</style>
